<template>
  <div>
    <header class="logo">
      <Logo />
    </header>
    <section>
      <div class="cnt">
        <el-card>
          <h2>个人信息</h2>
          <el-form label-width="100px">
            <el-form-item label="昵称">
              <el-input
                placeholder="昵称"
                v-model="formParams.nickName"
              ></el-input>
            </el-form-item>
            <el-form-item label="头像">
              <pic-upload v-model="formParams.avatar" />
            </el-form-item>
            <el-form-item label="生日">
              <el-input
                placeholder="生日"
                v-model="formParams.birthday"
              ></el-input>
            </el-form-item>
            <el-form-item label="个性签名">
              <el-input
                type="textarea"
                placeholder="个性签名"
                v-model="formParams.description"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="default" @click="save">
                保存
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
      <div class="cnt">
        <el-card>
          <h2>密码修改</h2>
          <el-form label-width="100px">
            <el-form-item label="原密码">
              <el-input
                placeholder="原密码"
                type="password"
                v-model="passFormParams.password"
              ></el-input>
            </el-form-item>
            <el-form-item label="新密码">
              <el-input
                placeholder="新密码"
                type="password"
                v-model="passFormParams.newPassword"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="default" @click="savePass">
                保存
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { userInfoEdit, passwordEdit } from '@/api/user/index'
import { useUserStore } from '@/store/modules/user'
import { onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import Logo from '@/layout/logo/index.vue'
import { ElMessage } from 'element-plus'
let userStore = useUserStore()
let $router = useRouter()
onMounted(() => {
  let { userId, nickName, avatar, birthday, description } = userStore
  formParams.userId = userId
  formParams.nickName = nickName
  formParams.avatar = avatar
  formParams.birthday = birthday
  formParams.description = description
  passFormParams.userId = userId
})

const defaultForm = {
  userId: '',
  nickName: '', // 昵称
  avatar: '', // 头像
  birthday: '', // 生日
  description: '', // 描述
}
let formParams = reactive<any>({
  ...defaultForm,
})

const passDefaultForm = {
  userId: '',
  password: '', // 原密码
  newPassword: '', // 新密码
}
let passFormParams = reactive<any>({
  ...passDefaultForm,
})

const save = async () => {
  let result = await userInfoEdit(formParams)
  if (result.status == 200) {
    ElMessage({
      type: 'success',
      message: '操作成功',
    })
    location.reload()
  } else {
    ElMessage({
      type: 'error',
      message: '操作失败',
    })
  }
}
const savePass = async () => {
  let result = await passwordEdit(passFormParams)
  if (result.status == 200) {
    ElMessage({
      type: 'success',
      message: '操作成功',
    })
    // location.reload()
    await userStore.logout()
    $router.push({ path: '/login' })
  } else {
    ElMessage({
      type: 'error',
      message: '操作失败',
    })
  }
}
</script>

<style lang="scss" scoped>
.logo {
  position: fixed;
  top: 0;
  left: 0;
  background-color: $base-menu-background;
}

section {
  margin-top: $base-tabbar-height;
  padding: 20px;

  h2 {
    text-align: center;
    line-height: 2;
  }

  .cnt {
    width: 30%;
    min-width: 300px;
    margin: 0 0 15px 35%;
  }
}
</style>
